<template>
	<view class="Text-folding">
		<view :class="unfoldShow ? 'textWrapper text-item' : 'textWrapper2 text-item'"
			:style="'line-height:'+lineHeight+'px;-webkit-line-clamp:'+LineNumber+';font-size:'+size+'px;color:'+textColor+';'">
			{{ text }}
		</view>
		<view  @click="Setunfold" v-if="unfold&&butshow" :style="'font-size:'+PackUpSize+'px;color:'+PackUpColor+';'">
			{{PackUpText}}
		</view>
		<view @click="Setunfold" v-if="!unfold&&butshow" :style="'font-size:'+unfoldSize+'px;color:'+unfoldColor+';'">
			{{unfoldText}}
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			text: {//内容
				type: String,
				default: ''
			},
			LineNumber: {//折叠显示行数
				type: Number,
				default: 2
			},
			lineHeight: {//内容行高
				type: String,
				default: '20'
			},
			size: {//内容文字大小【单位px】
				type: String,
				default: '13'
			},
			PackUpText: {//收起按钮文字
				type: String,
				default: '收起'
			},
			unfoldText: {//展开按钮文字
				type: String,
				default: '展开'
			},
			PackUpColor:{//收起按钮文字颜色
				type: String,
				default: '#4992ff'
			},
			unfoldColor:{//展开按钮文字颜色
				type: String,
				default: '#4992ff'
			},
			textColor:{//内容文字颜色
				type: String,
				default: '#999999'
			},
			PackUpSize:{//收起按钮文字大小【单位px】
				type: String,
				default: '15'
			},
			unfoldSize:{//展开按钮文字大小【单位px】
				type: String,
				default: '15'
			}
		},
		data() {
			return {
				unfold: false,
				unfoldShow: false,
				butshow: false
			};
		},
		mounted() {
			this.checkTextOverflow();
		},
		methods: {
			Setunfold() {
				const _this = this;
				if (_this.unfoldShow == true) {
					_this.unfoldShow = false
					_this.unfold = true
				} else {
					_this.unfoldShow = true
					_this.unfold = false
				}
			},
			checkTextOverflow() {
				const _this = this;
				uni.createSelectorQuery()
					.in(_this)
					.select('.text-item')
					.boundingClientRect((rect) => {
						if (rect) {
							const lineHeight = _this.lineHeight; // 与样式中的line-height保持一致
							const expectedHeight = lineHeight * _this.LineNumber;
							if (rect.height > expectedHeight) {
								console.log('文本已经超出两行');
								_this.unfoldShow = true
								_this.butshow = true
							} else {
								console.log('文本未超出两行');
								_this.unfoldShow = false
								_this.butshow = false
							}
						}
					})
					.exec();
			}
		}
	};
</script>

<style scoped>
	.Text-folding .textWrappe {
			width: 100%;
			/* 假设文本宽度为200px，确保文本会在限定宽度下换行 */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	.Text-folding .textWrapper2 {
			color: #999999;
			width: 100%;
			/* 假设文本宽度为200px，确保文本会在限定宽度下换行 */
		
	}
</style>